<template>
  <li>
<label>
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
<!-- 如下代码也能实现功能,但是不太推荐,因为违反了不能修改props的原则 -->
<!-- <input type="checkbox" v-model="something" /> -->

<span v-show="!todo.isEdit" >{{todo.title  }}</span>
<input 
type="text" 
v-show="todo.isEdit" 
:value="todo.title" 
@blur="handleBlur(todo,$event)"
ref="inputTitle"
>
</label>

<button class="btn btn-danger" @click="handleDelete(todo.id)" >删除</button>
<button v-show="!todo.isEdit"  class="btn btn-edit"  @click="handleEdit(todo)" >编辑</button>

</li>
</template>

<script>
    import pubsub from 'pubsub-js'

    export default {
        name:'MyItem',
        props:['todo'],
        methods:{
          handleCheck(id){
            // this.checkTodo(id)
            this.$bus.$emit("checkTodo",id)
          },
          handleDelete(id){
            if(confirm("确认删除吗?")){
              // this.deleteTodo(id)
              // this.$bus.$emit("deleteTodo",id)
              pubsub.publish("deleteTodo",id)
            }
          },
          handleEdit(todo){
            // todo.isEdit=true
            if(todo.hasOwnProperty('isEdit')){
              todo.isEdit=true
            }else{
              console.log("$set")
              this.$set(todo,'isEdit',true)
            }
            this.$nextTick(function(){
              this.$refs.inputTitle.focus();
            })
            // setTimeout(() => {
            //   this.$refs.inputTitle.focus();
            // }, 200);

            //  setTimeout(() => {
            //   this.$refs.inputTitle.focus();
            // });
          }
          //失去焦点回调
          ,handleBlur(todo,e){
            todo.isEdit=false
            console.log(e.target.value)
            if(!e.target.value.trim()) return alert("输入不能为空！")
            this.$bus.$emit("updateTodo",todo.id,e.target.value)
          }
        }
    }
</script> 

<style scoped>
li{
list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1x solid #ddd;
}
li label {
float: left;
cursor: pointer;
}

li label li input {vertical-align:middle;margin-right:6px;position:relative; top:-1px;}
li button {float: right;display: none;margin-top: 3px;}

li:hover{
  background-color: #ddd;
}
li:hover button{
  display: block;
}
li:before {
content:initial;
}

li:last-child {border-bottom: none;}
</style>